<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>校园活动详情</span>
        <span><components is="Screenfull" ref="Screenfull"></components></span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody apply-box-left-from">
        <div class="boardBody">
          <div class="boardBody-list">
            <downexcel type="activeDetailData" :option="{id: detailId}" :excelName="detailData?detailData.title:''"></downexcel>
            <el-form label-width="90px" ref="editForm" v-if="detailData">
              <el-form-item label="活动名称：">
                {{ detailData.title }}
              </el-form-item>
              <el-form-item label="活动时间：">
                {{ detailData.start_time }}至{{ detailData.end_time }}
              </el-form-item>
              <el-form-item label="活动内容：">
                {{ detailData.description || '无' }}
              </el-form-item>
            </el-form>
            <div class="num-active-line">
              <div class="num-active-line-list" v-if="detailData && detailData.is_apply">
                <count-to :startVal='signUp' :endVal='signUpNumber' :duration='1000'></count-to>
                <p>报名人数</p>
              </div>
              <div class="num-active-line-list">
                <count-to :startVal='signIn' :endVal='signInNumber' :duration='1000'></count-to>
                <p>签到人数</p>
              </div>
              <div class="num-active-line-list" v-if="detailData && detailData.is_apply">
                <div>
                  <count-to :startVal='signRate' :endVal='signRateNumber' :duration='1000'></count-to>%
                </div>
                <p>签到率</p>
              </div>
            </div>
          </div>
          <div class="boardBody-list">
            <div id="qrcode"></div>
            <p class="title-qrcode">扫码签到</p>
          </div>
        </div>
        <div class="tagBox">
          <el-form class="tagBoxFrom">
            <el-form-item label="签到人：" v-if="userList.length">
              <el-tag v-for="(item,index) in userList" :key="index">{{item.name}}{{item.classes ? '('+item.classes.class_name+')' : ''}}</el-tag>
            </el-form-item>
            <el-form-item label="签到人：" v-else>
              暂无签到人...
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import {systemIndex} from '@/api/admin/system';
import countTo from 'vue-count-to'
import {activityDetail} from "@/api/admin/school"

export default {
  props: ['visible', 'detailId'], // recruitmentType examine 审核
  components: {countTo},
  data() {
    return {
      dialogVisible: false,
      signUp: 0, // 报名
      signIn: 0, // 签到
      signUpNumber: 0,
      signInNumber: 0,
      signRate: 0,
      signRateNumber: 0,
      timerShipInfo: null,
      qrcodeBox: null,
      getQrcode: false,
      detailData: null,
      userList:[]
    }
  },
  watch: {
    visible() {
      let that = this
      this.dialogVisible = this.visible
      if (this.visible) {
        that.getDetail()
        this.timerShipInfo = setInterval(() => {
          that.getDetail()
        }, 1500);
      } else {
        this.signUp = 0 // 报名
        this.signIn = 0 // 签到
        this.signUpNumber = 0
        this.signInNumber = 0
        this.signRate = 0
        this.signRateNumber = 0
        this.getQrcode = false
        this.detailData = null
        this.userList = []
        clearInterval(that.timerShipInfo)
      }
    }
  },
  created() {

  },
  methods: {
    getDetail() {
      activityDetail({id: this.detailId}).then(res => {
        this.signUp = this.signUpNumber
        this.signUpNumber = res.vo.number
        this.signIn = this.signInNumber
        this.signInNumber = res.vo.sign_number
        this.signRate = this.signRateNumber
        this.userList = res.vo.user_list
        if(res.vo.number && res.vo.sign_number){
          this.signRateNumber = res.vo.sign_number?parseFloat(((res.vo.sign_number/res.vo.number)*100).toFixed(1)):0
        }else{
          this.signRateNumber = 0
        }
        if (!this.detailData) {
          res.vo.start_time = res.vo.start_time.split(' ')[0]
          res.vo.end_time = res.vo.end_time.split(' ')[0]
          this.detailData = res.vo
        }
        if (!this.getQrcode) {
          this.qrcode(JSON.parse(JSON.stringify(res.vo.style)))
        }
      })
    },
    // 生成二维码
    qrcode(option) {
      this.getQrcode = true
      let style_ = option.split(',').map(Number)
      systemIndex({}).then(response => {
        let link = `${response.vo.url}/program/#/subProjects?id=${this.detailId}`
        if (style_.length === 1 && style_.indexOf(1) !== -1) {
          link = `${response.vo.url}/workers/#/subProjects?id=${this.detailId}`
        }
        this.qrcodeBox = new QRCode('qrcode', {
          width: 300,
          height: 300, // 高度
          text: link
        })
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$refs.Screenfull.closeScreenfull();
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 99%;
  height: 99%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.boardBody {
  display: flex;
}
.boardBody-list{
  padding: 30px 0;
}
.boardBody-list:first-child {
  flex: 1;
}

.boardBody-list:last-child {
  width: 500px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #edf5ff;
  justify-content: center;
  border-radius: 10px;
}

.title-qrcode {
  width: 100%;
  text-align: center;
  font-size: 24px;
  margin-top: 20px;
}

.num-active-line {
  display: flex;
}

.num-active-line-list {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.num-active-line-list:nth-child(2),.num-active-line-list:nth-child(3) {
  margin-left: 20px;
}

.num-active-line-list span {
  font-size: 64px;
  font-weight: bold;
  color: #ef6f14;
  text-shadow: 1px 1px 1px #9a4009;
}

.num-active-line-list p {
  font-size: 18px;
  margin-top: 10px;
}
.tagBox{
  display: flex;
  align-items: center;
}
.tagBoxFrom{
  width: 50%;
}
.tagBoxFrom .el-tag{
  margin-right: 10px;
  font-size: 18px;
}
</style>
